<template>
    <div class="content">
        <!-- 画面 -->
        <div :class="{ 'screen': true,'screenSuccess': pageflag,'screenError': !pageflag}">
            <!-- 按钮区域 -->
            <div class="button-district">
<!--                <el-tooltip-->
<!--                    v-for="(item, index) in Watchlist"-->
<!--                    :key="index"-->
<!--                    class="item"-->
<!--                    effect="dark"-->
<!--                    :content=item.cameraName-->
<!--                    placement="top"-->
<!--                >-->
<!--                    <div-->
<!--                        class="button-item"-->
<!--                        @click="activateTab(index,item.cameraIndexCode, item.isLocalPlatForm)"-->
<!--                        :class="{ 'active': activeTab === index }"-->
<!--                    >-->
<!--                        {{ index + 1 }}号-->
<!--                    </div>-->
<!--                </el-tooltip>-->
            </div>
            <video-player
                v-if="videoBool"
                class="video-player vjs-custom-skin museums-video"
                ref="videoPlayer"
                :options="playerOptions"
                @play="onPlayerPlay($event)"
                @pause="onPlayerPause($event)"
                @error="handleVideoError"
            ></video-player>
        </div>

    </div>
</template>

<script>
import {currentGET} from "api";
export default {
    name: "RightTopItem",
    props: ['cameraIndexCode', 'isLocalPlatForm'],
    data() {
        return {
            pageflag: true,
            // activeTab: 0,
            buttonList: ['1号', '2号', '3号'],
            Watchlist: [],
            m3u8Url: "",
            videoBool: false,
            // 监控参数
            playerOptions: {
                //视频url设置,直播流为例
                sources: [{
                    // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
                    // src: 'http://220.161.87.62:8800/hls/0/index.m3u8',//视频文件地址
                    src: this.m3u8Url,//视频文件地址
                    type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
                }],
                // 其他设置项
                // notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息
                notSupportedMessage: "当前单位暂无实时视频",//提示信息
                // autoplay: true,//是否自动播放
                height: "160px",
                muted: true,
                // controls: true, //是否显示控制栏,
                // poster: 'http://path/to/poster.jpg',//视频封面
            },
        };
    },
    created() {
        console.log(this.cameraIndexCode, "cameraIndexCode");
        console.log(this.isLocalPlatForm, "isLocalPlatForm");
        // this.getData();
        this.activateTab(this.cameraIndexCode, this.isLocalPlatForm);
    },
    mounted() {
        this.$nextTick(()=>{
            // console.log(this.$refs.videoPlayer.player, "this.$refs.videoPlayer.player");
            // this.$refs.videoPlayer.player.play();
        })
    },
    beforeDestroy() {

    },
    methods: {
        getData() {
            // this.loading = this.$loading({
            //     lock: true,
            //     text: 'Loading',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });

            currentGET("getCamerListByReginId", {userId: this.userId})
                // currentGET("getCamerListByReginId", {userId: 3504})
                .then((res) => {
                    if (res.success) {
                        // this.Watchlist = res.data.splice(-5);
                        this.Watchlist = res.data;
                        this.activateTab(0, this.Watchlist[0].cameraIndexCode, this.Watchlist[0].isLocalPlatForm);
                        console.log(JSON.parse(JSON.stringify(this.Watchlist)), "this.Watchlist");
                    } else {
                        this.pageflag = false;
                    }
                })
                .catch((e) => {
                    this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                    // this.loading.close();
                });
        },
        activateTab(cameraIndexCode, isLocalPlatForm) {
            // this.activeTab = index;
            // console.log(this.activeTab, "this.activeTab");
            console.log(cameraIndexCode, "cameraIndexCode");
            console.log(isLocalPlatForm, "isLocalPlatForm");
            this.videoBool = false;
            currentGET("getCameraUrl", {cameraIndexCode, isLocalPlatForm})
                .then((res) => {
                    if (res.success) {
                        // this.m3u8Url = res.data.url;
                        this.playerOptions.sources[0].src = res.data.url;
                        console.log(res.data.url, "res.data.url")
                        console.log(JSON.parse(JSON.stringify(this.playerOptions)), "this.playerOptions");
                        if (res.data.url) {
                            this.videoBool = true;
                        }else {
                            this.onPlayerError();
                        }
                        // this.$refs.videoPlayer.player.play();
                    } else {
                        this.onPlayerError();

                        this.pageflag = false;
                    }
                })
                .catch((e) => {
                    this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                    // this.loading.close();
                });
        },
        // 视频播放错误
        onPlayerError() {
            console.log(this.$parent.museumList, "this.$parent.museumList");
            const targetIndex = this.$parent.museumList.findIndex(item => item.cameraIndexCode === this.cameraIndexCode);
            if (targetIndex !== -1) {
                this.$parent.museumList.splice(targetIndex, 1);
            }
        },

        handleVideoError(error) {
            // 在这里处理异常事件
            console.error('视频播放出现错误1111111:', error);
            this.pageflag = false;
            this.videoBool = false;
        },
        // 播放回调
        onPlayerPlay(player) {
            console.log('播放', player)
            // 调用父组件的方法
            this.$parent.pauseVideo(this.$refs);
        },

        // 暂停回调
        onPlayerPause(player) {
            console.log('暂停', player)
        },
        // 主动播放
        // onPlayerPlaying(refs) {
        //     refs.videoPlayer.player.play()
        // },
        // 主动暂停播放
        onPlayerMuted(player) {
            this.$refs.videoPlayer.player.pause();
        }
    },
};
</script>
<style lang='scss' scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/monitoring-border.png");
  background-size: cover;

  .button-district {
    display: flex;
    flex-wrap: wrap;

    .button-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 26px;
      background: rgba(142, 191, 232, 0.5);

      /* 鼠标悬停时的样式 */
      &:hover {
        background: rgba(142, 191, 232, 0.9);
        transition: background-color 0.15s ease; /* 添加过渡动画效果 */
      }

      /* 按钮被点击时的样式 */
      &:active {
          background: rgba(93, 140, 179, 0.9);
        transition: background-color 0.15s ease; /* 添加过渡动画效果 */
      }

      /* 鼠标移出时的样式 */
      &:not(:hover):not(:active) {
        transition: background-color 0.15s ease; /* 添加过渡动画效果 */
      }
    }

    .active {
      background: rgba(142, 191, 232, 1);
    }
  }


  .screen {
      width: 100%;
      height: 100%;
      //background-image: url("../../assets/img/img.png");
      background-color: #000;
      background-size: cover;
      margin-top: 10px;
      position: relative;

      .button-district{
          position: absolute;
          z-index: 999;
      }

      .museums-video {
          position: absolute;
          top: 1.5px;
          //z-index: -1;
          width: 100%;
      }
  }

  .screenSuccess {
      //background-image: url("../../assets/img/img.png");
      background-color: #000;
  }
  .screenError {
    background-image: url("../../assets/img/DefaultPage.jpg");
  }

}

::v-deep .vjs-error .vjs-error-display:before {
    content: '⚠️';
}

::v-deep .vjs-modal-dialog-content{
    transform: translateY(300px);
}

::v-deep .vjs-error-display {
    overflow: hidden;
}

//::v-deep .vjs-custom-skin > .video-js .vjs-big-play-button {
//    display: none;
//}

</style>
